<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>print_A4_table_2cols_02</title>
	<style>
		@page {
			margin-top: 0;
			margin-bottom: 0;
			margin-left: 0;
			margin-right: 0;
		}
		@media print{
			body {
				background: #fff;
				margin-top: 0;
				margin-bottom: 0;
				margin-left: 0;
				margin-right: 0;
			}
			.notShow {
				display: none;
			}
		}
	</style>
	<script type="text/javascript" src="../third-party/jquery-1.10.2.min.js"></script>
</head>
<body>

<input class="notShow" type="button" id="printBtn" value="打印"/>
<hr class="notShow">
<!-- 
	1114 : 
	56+668+56 :
 -->
<table id="page_1" style="border:1px solid red;margin:0;padding:0;">
	<tr height="1114px">
		<td width="56px" style="border:1px solid blue;margin:0;padding:0;"></td>
		<td width="668px" style="border:1px solid green;margin:0;padding:0;">
			<div style="height:24px;width:668px;margin:0;padding:0;"></div>
			<div style="height:103px;width:668px;margin:0;padding:0;" class="emr_head">
				<div style="font-family:宋体;font-size:18pt;font-weight:bold;letter-spacing:0.1em;padding-top:0.25em;text-align:center;">人人康科技医院</div>
				<div style="font-family:宋体;font-size:15.75pt;letter-spacing:0.2em;padding-top:0.25em;text-align:center;">入院记录</div>
				<div style="font-family:宋体;font-size:10.5pt;padding-top:0.5em;"> 姓名: 王思思&nbsp;&nbsp;性别: 女&nbsp;&nbsp;科别: 外科&nbsp;&nbsp;床号: 302&nbsp;&nbsp;病案号: 20171224001</div>
				<hr style="margin:0;padding:0;" />
			</div>
			<div style="height:922px;width:668px;border:1px solid blue;margin:0;padding:0;overflow:hidden;" class="emr_main"></div>
			<div style="height:35px;width:668px;margin:0;padding:0;" class="emr_foot">
				<hr style="margin:0;padding:0;" />
				<div style="font-family:宋体;font-size:11pt;text-align:center;">第 1 页</div>
			</div>
			<div style="height:24px;width:668px;margin:0;padding:0;"></div>
		</td>
	</tr>
</table>
<hr class="notShow">

<script type="text/javascript">
	$(function(){
		$('#printBtn').on('click', function(){
			var head = $('div.emr_head', '#page_1');
			var divs = head.find('div');
			var _h = 0;
			$.each(divs, function(i,n){
				_h += $(n).outerHeight(true);
				console.log( $(n).outerHeight(true) ); // height;
			});
			_h += head.find('hr').eq(0).outerHeight(true);
			console.log( _h );
			console.log('hr: ', head.find('hr').eq(0).outerHeight(true) );
			
			var foot = $('div.emr_foot', '#page_1');
			var eles = foot.find('*');
			var _h2 = 0;
			$.each(eles, function(i,n){
				_h2 += $(n).outerHeight(true);
				console.log( $(n).outerHeight(true) );
			});
			console.log( '_h2: ',_h2 );
			
			
			// return false;
			var $ifr_00 = $('#ifr_00');
			if($ifr_00[0]){
				$ifr_00.remove();
			}
			var tplIfr = '<iframe id="ifr_00" style="width:0;height:0;"></iframe>';
			$('body').append( tplIfr );
			setTimeout(function(){
				$ifr_00 = $('#ifr_00');
				if($ifr_00[0]){
					var _ifr = $ifr_00[0];
					var _doc = _ifr.contentWindow.document;
					_doc.open();
					_doc.write('<html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><title></title>');
					
					// 从当前页面抽取样式"style"
					_doc.write( $('style', document)[0].outerHTML );
					
					_doc.write('</head><body>');
					
					// 从当前页面抽取"table"元素
					_doc.write($('table', document.body)[0].outerHTML);
					
					_doc.write( '<script type="text\/javascript">window.onload=function(){window.print();};<\/script>' );
					_doc.write('</body></html>');
					
					_doc.close();
				}
			}, 0);
		});
	});
</script>

</body>
</html>